Skip to main content

Model Swap

Tutorial for changing 3D models during the AR session.

caution

This kind of interaction is only available in the WebARSession

  1. Add an element with class view3d-ar-overlay inside the .view3d-wrapper element
<div class="view3d-wrapper">
  <canvas class="view3d-canvas"></canvas>
  <div class="view3d-ar-overlay"></div>
</div>
  1. Add some buttons inside view3d-ar-overlay.
<div class="view3d-ar-overlay">
  <button id="btn-alarm">Alarm Clock</button>
  <button id="btn-payphone">Payphone</button>
  <button id="btn-plant">Plant</button>
</div>
  1. Add click handlers for buttons
import View3D from "@egjs/view3d";

const view3D = new View3D("#el", {
  src: "...",
  envmap: "...",
  // IMPORTANT, set overlay root to ".view3d-ar-overlay"
  webAR: { overlayRoot: ".view3d-ar-overlay" }
});

const buttons = [
  { el: document.getElementById("btn-alarm"), src: "/egjs-view3d/model/draco/alarm.glb" },
  { el: document.getElementById("btn-payphone"), src: "/egjs-view3d/model/draco/payphone.glb" },
  { el: document.getElementById("btn-plant"), src: "/egjs-view3d/model/draco/plant.glb" }
];

buttons.forEach(btn => {
  btn.el.addEventListener("click", () => {
    view3D.load(btn.src);
  });
})
Alarm Clock
Payphone
Plant
{
    src: "/egjs-view3d/model/draco/alarm.glb",
    iosSrc: "/egjs-view3d/model/usdz/alarm.usdz",
    webAR: {
        overlayRoot: ".view3d-ar-overlay"
    },
    sceneViewer: false,
    quickLook: false,
    zoom: {
        type: "distance"
    }
}